import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:yysk_app/model/pay_model/bill_page_model.dart';
import 'package:yysk_app/model/tab_model.dart';
import 'package:yysk_app/utils/colors.dart';
import 'package:yysk_app/utils/helper.dart';
import 'package:yysk_app/widget/app_bar_back_widget.dart';
import 'package:yysk_app/widget/custom_app_bar2.dart';
import 'package:yysk_app/widget/image_asset_widget.dart';
import 'package:yysk_app/widget/lazy_network_image.dart';
import 'package:yysk_app/widget/refresh_and_scroll_widget.dart';
import 'package:yysk_app/widget/tab_widget.dart';
import 'settle_detail_controller.dart';

class SettleDetailPage extends GetView<SettleDetailController> {
  static const path = '/settleDetail';
  const SettleDetailPage({super.key});

  @override
  Widget build(BuildContext context) {
    final double top = MediaQuery.of(context).padding.top;
    return Scaffold(
      body: Stack(
        children: [
          Positioned(
            top: 0,
            left: 0,
            right: 0,
            child: ImageAssetWidget(
              width: 375.px,
              height: 812.px,
              imageUrl: 'static/images/bg.png',
            ),
          ),
          Padding(
            padding: EdgeInsets.fromLTRB(0, top, 0, 24.px),
            child: Column(
              children: [
                // CustomAppBar2(title: '结算明细', context: context),
                // SizedBox(height: top),
                Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  crossAxisAlignment: CrossAxisAlignment.center,
                  children: [
                    Stack(
                      children: [
                        CustomAppBar2(title: '', context: context),
                        Positioned(
                          top: 0,
                          bottom: 0,
                          child: Obx(() {
                            return TabWidget(
                              value: controller.activeTab.value,
                              isCurrentFontSize: 17,
                              notCurrentFontSize: 17,
                              rowMainAxisAlignment: 'center',
                              activeColor: AppColors.fontColor,
                              tabColor: AppColors.fontColorGray99,
                              tabList: [
                                TabModel(label: '待到账', code: 'PROCESSING'),
                                TabModel(label: '已到账', code: 'SUCCESS'),
                              ],
                              onChanged: (val) {
                                controller.changeTab(val);
                              },
                            );
                          }),
                        ),
                      ],
                    ),
                  ],
                ),
                Container(
                  padding: EdgeInsets.symmetric(
                    horizontal: 12.px,
                    vertical: 8.px,
                  ),
                  color: Color.fromRGBO(255, 66, 82, 0.20),
                  child: Text(
                    '钱包未开通时所得金额或结算到三方支付平台有延迟的金额均可在待到账中查看',
                    style: TextStyle(
                      fontSize: 12.px,
                      color: AppColors.fontColorRed2,
                    ),
                  ),
                ),
                hiSpace(height: 20.px),
                Expanded(
                  child: Column(
                    children: [
                      Container(
                        padding: EdgeInsets.symmetric(
                          horizontal: 12.px,
                          vertical: 6.px,
                        ),
                        child: Row(
                          children: [
                            GestureDetector(
                              onTap: controller.showDateFilter,
                              child: Obx(
                                () => Container(
                                  decoration: BoxDecoration(
                                    color: AppColors.backgroundColorBlackLight,
                                    borderRadius: BorderRadius.circular(6.px),
                                  ),
                                  padding: EdgeInsets.symmetric(
                                    horizontal: 10.px,
                                    vertical: 6.px,
                                  ),
                                  alignment: Alignment.center,
                                  child: Row(
                                    mainAxisAlignment: MainAxisAlignment.center,
                                    children: [
                                      Text(
                                        controller.selectedDateRange.value,
                                        style: TextStyle(
                                          fontSize: 12.px,
                                          color: AppColors.fontColor,
                                        ),
                                      ),
                                      Icon(
                                        Icons.arrow_forward_ios,
                                        color: AppColors.fontColorGray99,
                                        size: 12.px,
                                      ),
                                    ],
                                  ),
                                ),
                              ),
                            ),
                          ],
                        ),
                      ),
                      Expanded(
                        child: Obx(
                          () => Padding(
                            padding: EdgeInsets.fromLTRB(12.px, 0, 12.px, 0),
                            child: RefreshAndScrollWidget(
                              onRefresh: _handleRefresh,
                              scrollController: controller.scrollController,
                              itemBuilder:
                                  (item, index) =>
                                      _listItem(context: context, item: item),
                              itemCount: controller.billList.length,
                              items: controller.billList,
                            ),
                          ),
                        ),
                      ),
                    ],
                  ),
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }

  _handleRefresh() {
    controller.getBillList();
  }

  _listItem({required BillPageItem item, required BuildContext context}) {
    return Container(
      decoration: BoxDecoration(
        color: AppColors.backgroundColorBlackLight,
        borderRadius: BorderRadius.circular(10.px),
        border: Border.all(
          width: 1.px,
          color: Color.fromRGBO(255, 255, 255, 0.1),
        ),
      ),
      padding: EdgeInsets.fromLTRB(14.px, 12.px, 14.px, 12.px),
      margin: EdgeInsets.only(top: 12.px),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: [
          Expanded(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    Row(
                      children: [
                        Text(
                          '${item.orderInfo}',
                          style: TextStyle(
                            fontSize: 14.px,
                            fontWeight: FontWeight.bold,
                            overflow: TextOverflow.ellipsis,
                            color: AppColors.fontColor,
                          ),
                        ),
                      ],
                    ),
                    Text(
                      '${item.isAdd == false ? '-' : '+'}￥${item.orderAmt}',
                      style: TextStyle(
                        fontSize: 14.px,
                        fontWeight: FontWeight.bold,
                        color: AppColors.fontColorSearch,
                        overflow: TextOverflow.ellipsis,
                      ),
                    ),
                  ],
                ),
                SizedBox(height: 6.px),
                Text(
                  '${item.createTime}',
                  style: TextStyle(
                    fontSize: 12.px,
                    color: AppColors.fontColorGray99,
                  ),
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }
}
